<template>
	<view class="b-page" v-if="info.avatar">
		<view class="btn-box">
			<view :class="item.show == true?'btn':'activity-btn'" v-for="(item,index) in btnList" :key="index"
				@click="clicktabs(index,item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="replace">
			<view class="replace-top" v-if="index == 0">
				<view class="head">
					<u--image shape="circle" :showLoading="true" :src="'http://gpt.szyirxx.com'+info.avatar"
						width="150rpx" height="150rpx"></u--image>
				</view>
				<view class="replace-text" @click="goupimg">
					上传
				</view>
			</view>
			<view class="replace-top" v-else>
				<view class="head">
					<u--image shape="circle" :showLoading="true" :src="'http://gpt.szyirxx.com'+info.ai_avatar"
						width="150rpx" height="150rpx"></u--image>
				</view>
				<view class="replace-text" @click="goupimg">
					上传
				</view>
			</view>
			<view class="tips">
				上传头像或选择一个默认头像
			</view>
			<view class="head-box">
				<view :class="item.show==true?'activity-btn':'head-item'" v-for="(item,index) in headList" :key="index"
					@click="headClick(index)">
					<u--image shape="circle" :showLoading="true" :src="'http://gpt.szyirxx.com'+item.image"
						width="100rpx" height="100rpx"></u--image>
				</view>
			</view>
		</view>
		<view class="change">
			<u-button size="large" shape="circle" type="primary" text="更换" @click="goup"></u-button>
		</view>
		<tabbar :value="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/index.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				btnList: [],
				info: {},
				index: 0,
				id: 1,
				headList: []
			}
		},
		onShow() {
			this.postinfo()
			this.posttabs()
		},
		methods: {
			goup() {
				uni.showLoading({
					mask: true
				})
				let params = {

				}
				if (this.index == 0) {
					params.avatar = this.info.avatar
				} else {
					params.ai_avatar = this.info.ai_avatar
				}
				this.$Request({
					method: 'POST',
					data: params,
					url: '/user/editInfo'
				}).then(res => {
					if (res.data.code == 1) {
						uni.hideLoading()
						uni.showToast({
							title: '更换成功！',
							icon: 'none'
						})
						this.postinfo()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			goupimg() {
				let app = this
				uni.chooseImage({
					count: 1, // 可以选择图片的数量
					success: (res) => {
						let info = res.tempFilePaths
						uni.showLoading({
							mask: true
						})
						uni.uploadFile({
							url: 'http://gpt.szyirxx.com/api/common/upload',
							filePath: info[0],
							name: 'file', // 服务器接收图片的参数名
							success: (res) => {
								uni.hideLoading()
								let ress = JSON.parse(res.data)
								if (ress.code == 1) {
									if (app.index == 0) {
										app.info.avatar = ress.data.url
									} else {
										app.info.ai_avatar = ress.data.url
									}

								} else {
									uni.showToast({
										title: ress.msg,
										icon: 'none'
									})
								}
							}
						});
					},
				});
			},
			postinfo() {
				this.$Request({
					method: 'POST',
					url: '/user/getUserInfo'
				}).then(res => {
					if (res.data.code == 1) {
						this.info = res.data.data
					}
				})
			},
			posttabs() {
				this.$Request({
					method: 'POST',
					url: '/avatar/getCateList'
				}).then(res => {
					if (res.data.code == 1) {
						this.btnList = res.data.data
						this.btnList.map(item => {
							item.show = false
						})
						this.btnList[0].show = true
						this.postavalist()
					}
				})
			},
			postavalist() {
				let params = {
					cate_id: this.id
				}
				this.$Request({
					method: 'POST',
					data: params,
					url: '/avatar/getAvatarList'
				}).then(res => {
					if (res.data.code == 1) {
						this.headList = res.data.data.data
						this.headList.map(item => {
							item.show = false
						})
						this.headList[0].show = true
					}
				})
			},
			clicktabs(index, id) {
				this.btnList.map(item => {
					item.show = false
				})
				this.btnList[index].show = true
				this.index = index
				this.id = id
				this.postavalist()
			},
			headClick(index) {
				this.headList.forEach((item, i) => {
					this.$set(this.headList[i], 'show', i === index);
				});
				if (this.index == 0) {
					this.info.avatar = this.headList[index].image
				} else {
					this.info.ai_avatar = this.headList[index].image
				}

				this.$forceUpdate(); // 手动触发视图更新
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.b-page {
		padding: 30rpx;

		.btn-box {
			padding: 10rpx;
			background-color: #F6FAFF;
			border-radius: 55rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
			font-size: 28rpx;

			.btn {
				width: 45%;
				background-color: #0B0D1C;
				color: #ffffff;
				border-radius: 55rpx;
				padding: 20rpx;
			}

			.activity-btn {
				width: 45%;
				padding: 20rpx;
				color: #666666;
				border-radius: 55rpx;
			}
		}

		.replace {
			margin-top: 20%;
			background-color: #F6FAFF;
			padding: 30rpx;
			border-radius: 40rpx;

			.replace-top {
				position: relative;
				display: flex;
				justify-content: center;

				.head {
					margin-top: -100rpx;
				}

				.replace-text {
					background-color: #0B0D1C;
					color: #ffffff;
					position: absolute;
					left: 42%;
					top: 30rpx;
					padding: 4rpx 30rpx;
					border-radius: 40rpx;
					font-size: 26rpx;
				}
			}

			.tips {
				color: #999999;
				font-size: 26rpx;
				padding: 40rpx;
				margin-top: 20rpx;
				text-align: center;
			}

			.head-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.activity-btn {
					padding: 10rpx;
					border: 2rpx solid #6897FF;
					border-radius: 50%;
				}

				.head-item {
					padding: 10rpx;
					border: 2rpx solid transparent;
					border-radius: 50%;
				}
			}
		}

		.change {
			margin-top: 50rpx;
		}
	}
</style>